import React from 'react';
import { inject, observer } from 'mobx-react';
import { WeaDialog, WeaNewScroll, WeaSelect, WeaBrowser, WeaDatePicker, WeaTimePicker, WeaTextarea, WeaInput, WeaUpload, WeaFormItem, WeaSearchGroup, WeaRightMenu, WeaTop, WeaTools} from 'ecCom';
import { Button, Spin, Row, Col, Input, Radio, Checkbox, Modal, DatePicker, Tabs } from 'antd';
import {WeaTableNew, WeaSwitch } from 'comsMobx';
import {toJS} from 'mobx';
import isEmpty from 'lodash/isEmpty';
import mapKeys from 'lodash/mapKeys';
import RoomShareDialog from './RoomShareDialog';
import {WeaLocaleProvider} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;
const ButtonGroup = Button.Group;
const RadioGroup = Radio.Group;
const CheckboxGroup = Checkbox.Group;
const TabPane = Tabs.TabPane;
const WeaTable = WeaTableNew.WeaTable;
const getKey = WeaTools.getKey;
@inject('meetingRoom')
@observer
class RoomCreate extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
		}
	}
	componentDidMount() {

	}

	componentWillReceiveProps(nextProps) {
	}

	componentWillUnmount() {
		//组件卸载时一般清理一些状态
	}
	render() {
		// const {loading} = this.props
		let title = getLabel(383319,"新建会议室");
		let { meetingRoom } = this.props;
		let {viewType, showTab} = meetingRoom;
		if (viewType == 'create' || viewType == 'preview') {
			return (
				<WeaNewScroll height='450px'>
					<div>
						{this.getFields() }
					</div>
				</WeaNewScroll >
			)
		} else {
			return (
				<Tabs activeKey={`${showTab}`} onChange={(e) => { this.onChangeTab(e) } } >
					{this.getTab() }
				</Tabs>
			)
		}
	}

	getTab = () => {
		let pane = [
			<TabPane tab={getLabel(383435,"会议室信息")} key="info">
				<WeaNewScroll height='450px'>
					<div>
						{this.getFields() }
					</div>
				</WeaNewScroll >
			</TabPane>,
			<TabPane tab={getLabel(82752,"共享范围")} key="share">
				<WeaNewScroll height='450px'>
					<div>
						{this.getList()}
					</div>
				</WeaNewScroll>
			</TabPane>
		];
		return pane;
	}

	getFields = () => {
		const {meetingRoom} = this.props;
		let fieldsInfo = meetingRoom.fields;
		let roomInfoForm = meetingRoom.roomInfoForm;
		const { isFormInit } = roomInfoForm;
		let group = [];
		isFormInit && fieldsInfo.map(c => {
			let items = [];
			c.items.map(fields => {
				let variable = true
                items.push({
                    com: (<WeaFormItem
                        label={`${fields.label}`}
                        labelCol={{ span: `${fields.labelcol}` }}
                        wrapperCol={{ span: `${fields.fieldcol}` }}>
						{this.createFields(fields,roomInfoForm)}
                    </WeaFormItem>),
                    colSpan: 1
                })

			});
			group.push(<WeaSearchGroup col={1} needTigger={true} title={c.title} showGroup={c.defaultshow} items={items} />)
		});
		return group;
	}

	getList =()=>{
		const {meetingRoom} = this.props;
		let {shareDataKey,shareTable} = meetingRoom;
		return (
			<div  className={"metting-search"} style={{ height: 450 }}>
			<RoomShareDialog
				doClose={() => {
					meetingRoom.closeShare();
					meetingRoom.getShareList({id:meetingRoom.roomid});
				} }
				roomId = {meetingRoom.roomid}
			/>
			<WeaRightMenu datas={this.getRightMenu(shareDataKey, shareTable) } onClick={this.onRightMenuClick }>
				<div>
					<div style={{ 'width':'158px','marginTop': '5px','marginLeft':'450px','paddingBottom':'3px' }} >
							<Button  type="primary"  onClick={() => { meetingRoom.showShare() } }>{getLabel(126105,"新建")}</Button>
							<Button style={{ 'marginLeft': '5px' }}  type="ghost"  onClick={() => { this.doDel(shareTable) } }>{getLabel(32136,"批量删除")}</Button>
					</div>
						{shareTable ? <WeaTable
							hasOrder={true}
							needScroll={true}
							onOperatesClick={this.onOperatesClick}
							sessionkey={shareDataKey}
							comsWeaTableStore={shareTable}
							/> : ''}
				</div>
            </WeaRightMenu>
			</div>
		)
	}

	onOperatesClick = (record, index, operate, flag, argumentString) => {
        const { meetingRoom } = this.props;
        let operateType = operate.index;
        if (operateType == 0) {//edit
            const { meetingRoom } = this.props;
			meetingRoom.deleteShare({ roomid: meetingRoom.roomid, ids: record.id });
        }
	}

	/**右键菜单*/
    getRightMenu(dataKey, tableStore) {
        let btns = [];
        const {meetingRoom} = this.props;
        // const selectedRowKeys = toJS(tableStore).selectedRowKeys;

        // btns.push({
        //     icon: <i className='icon-Right-menu--search'/>,
        //     disabled: selectedRowKeys.length === 0 ? true : false,
        //     content: '新建'
        // });

        return btns
    }
	
	//右键菜单事件绑定
    onRightMenuClick = (key)=>{
        const {meetingRoom} = this.props;
        // const {tableStore} = meetingRoom;
        // const selectedRowKeys = toJS(tableStore).selectedRowKeys;
        // if (key == '0') {
        //     // meetingSearch.doLoading(meetingSearch.adSearchForm.getFormParams());
        //     // meetingSearch.setShowSearchAd(false);
        // } else if (key == '1') {
        //     if (meetingRoom.showLocked) {
        //         this.changeLockStatus(selectedRowKeys, false);
        //     } else {
        //         this.changeLockStatus(selectedRowKeys, true);
        //     }
        // } else if (key == '2') {
        //     this.doDel(selectedRowKeys);
        // }
	}

	doDel(tableStore){
		const { meetingRoom } = this.props;
		const selectedRowKeys = toJS(tableStore).selectedRowKeys;
		meetingRoom.deleteShare({ roomid:meetingRoom.roomid,ids: selectedRowKeys});
	}
	onChangeTab = (e) => {
		const {meetingRoom} = this.props;
		meetingRoom.changeTab(e);
	}

	createFields(fields,roomInfoForm){
		if (fields.domkey[0] == "equipment"){
			const key = getKey(fields);
            const bindObj = roomInfoForm.$(key);
			return (
				<div>
					<WeaInput style={{ width: '90%' }} {...bindObj.bind() }/><a style={{ paddingLeft: '10px' }} >+</a>
					<div></div>
				</div>
			)
		}else{
			return (
				// fields.domkey[0] != "equipment" ?
				<WeaSwitch fieldConfig={fields} form={roomInfoForm} onChange={null/*todo*/} /> 
				//  : this.getEquipmentField(fields) 
			)
		}
	}

	getEquipmentField(fields) {

	}
}
export default RoomCreate
